<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box{
            height: 200px;
            /* solid 实心 */
            border: 1px black solid;
            /* 开启弹性布局 */
            display: flex;
            /* 主轴对齐方式 */
            justify-content: space-evenly;
            /* 交叉轴对齐方式 */
            align-items: center;
            /* 换行 不能使用 flex 必须在主轴上必须设置具体的值（数值，百分比） */
            flex-wrap: wrap;
        }
        .box .son{
             /* width: 80px; */
             width: 25%;
             height: 80px;
             color: orange;
             font-size: 30px;
             background-color: blue;
             /* flex: 1; */
             text-align: center;
             line-height: 80px;
        }
        .box .sp{
            align-self: flex-end;
             /* 主轴的占比 只设置一个 这个会把所有的尺寸 用完 */
             /* flex: 2; */
             background-color: skyblue;

        }
    </style>
  </head>
  <body>
    <div class="box">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son sp">4</div>
        <div class="son">5</div>
  </body>
</html>
